<template>
  <div id="app">
    <vanta-img style="z-index: -1"></vanta-img>
    <el-row>
      <el-col
          :span="12"
          :offset="6">
        <p
            style="font-size: 50px;font-family: 'Microsoft YaHei UI Light'"><span
            style="font-family: 'Eras Medium ITC';font-size: 70px">"</span>新建博文</p>
        <el-card>
          <el-row>
            <el-col>
              <p>标题</p>
              <el-input
                  style="width: 400px"
                  placeholder="请输入标题"
                  v-model="newArticleInfo.title"
                  clearable>
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>正文</p>
              <div style="border-radius: 20px;max-width: 800px">
                <Toolbar
                    :editor="editor"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"
                />
                <Editor
                    style="height: 200px;overflow-y: hidden"
                    v-model="html"
                    ref="editorRef"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="onCreated"
                />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>图片</p>
              <el-upload class="upload-demo"
                         drag action=''
                         :on-change="getFile"
                         :limit="1"
                         list-type="picture"
                         :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">上传图片<em>拖到此处</em>，或<em>点击上传</em></div>
                <div class="el-upload__tip">只能上传图片文件</div>
              </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>状态</p>
              <el-radio-group
                  v-model="newArticleInfo.state"
                  style="margin-bottom: 20px">
                <el-radio-button label="已发布"></el-radio-button>
                <el-radio-button label="草稿"></el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-button
                  type="success"
                  style="width:800px;margin: 10px;text-align: center"
                  round
                  @click="newBlog"
              >发布
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from "axios";
import qs from "qs";
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import QS from "qs";

export default Vue.extend({
  components: {Editor, Toolbar},

  data() {
    return {
      newArticleInfo: {
        title: '',
        content: '',
        cate_id: '13',
        cover_img: '',
        state: '已发布',
      },
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    newBlog() {
      this.insertText();
      console.log(this.newArticleInfo)
      axios.post('/my/article/add', QS.stringify(this.newArticleInfo)).then(res => {
        if (res.data.status !== 200) {
          this.$message.error('新增博客失败')
          console.log(res.data)
        }
        console.log(res.data)
        this.$router.push('./home')
        this.$notify({
          title: '新增博客成功',
          type: 'success',
          offset: 800
        })
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    //调用转换base64方法
    getFile(file, fileList) {
      this.getBase64(file.raw).then(res => {
        this.newArticleInfo.cover_img = res
      });
    },
    insertText() {
      const editor = this.editor.getHtml() // 获取 editor ，必须等待它渲染完之后
      if (editor == null) return editor.insertText('') // 执行 editor API

      this.newArticleInfo.content = editor;
      console.log('//' + editor)
    }
  }
})
</script>
<style lang="less" scoped>
* {

}

#app {
  height: 100vw;
  //background: rgba(117, 180, 154, 0.73);
  //opacity: 0;
  //animation: bottomBtn 0.5s linear 100ms forwards;

}

@keyframes bottomBtn {
  to {
    opacity: 1;
  }
  from {
    opacity: 0;
  }
}

.el-card {
  width: 850px;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  //display: flex;
  border-radius: 20px;
  box-shadow: 0px 0.5px 7px rgb(0, 0, 0, .1) !important;
  margin-bottom: 20px;
  backdrop-filter: blur(20px)
}

.el-card:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0px 0.5px 20px rgb(0, 0, 0, .2) !important;
  transform: translateY(-6px);
}

p {
  font-family: "Microsoft YaHei UI Light";
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/deep/ .w-e-text-container {
  background-color: #eeeeee;
  color: var(--w-e-textarea-color);
  height: 100%;
  position: relative;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

/deep/ .w-e-toolbar {
  flex-wrap: wrap;
  position: relative;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

/deep/ .el-upload-dragger {
  width: 800px;
  border: 1px dashed #d9d9d9;
  border-radius: 20px;
}

/deep/ .el-input__inner {
  border-radius: 20px;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

/deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/deep/ .el-upload-list {
  width: 800px;
}
</style>
